/*
 * @Author: xiaosihan 
 * @Date: 2022-07-11 07:51:56 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-25 20:50:50
 */
import { Button, QRCode, Typography } from "antd";
import styles from './index.module.less';
import { useEffect, useState } from "react";
import homeStore from "./homeStore";
import { autorun } from "mobx";
import modelViewRender from "@views/ModelView/modelViewRender";
const { Paragraph } = Typography;

const Home = () => {

    const [path, setPath] = useState(homeStore.path);
    const [role, setRole] = useState(homeStore.role);
    const [animas, setAnimas] = useState(homeStore.animas);
    const [anima, setAnima] = useState(homeStore.anima);

    useEffect(() => {
        // homeStore.setRole("2");
    });
    useEffect(() => autorun(() => {
        setRole(homeStore.role);
        modelViewRender.init();
    }), []);

    useEffect(() => autorun(() => {
        setAnimas(homeStore.animas);
        setPath(homeStore.path);
        setAnima(homeStore.anima);
    }), []);

    return (
        <div className={styles.home}>

            <div className={styles.left} >

                {/* <div>角色</div>
                <div className={styles.btns} >
                    <Button
                        type={role === "1" ? "primary" : "default"}
                        size="small" onClick={() => homeStore.setRole("1")}>
                        角色1
                    </Button>
                    <Button
                        type={role === "2" ? "primary" : "default"}
                        size="small" onClick={() => homeStore.setRole("2")}>
                        角色2
                    </Button>
                </div> */}

                <div>动画</div>
                <div className={styles.btns} >
                    {
                        animas.map((a, i) => {
                            return (
                                <Button
                                    key={i}
                                    type={anima === a ? "primary" : "default"}
                                    size="small" onClick={() => homeStore.setAnima(a)}>
                                    {a}
                                </Button>
                            );

                        })
                    }
                </div>
                <div>
                    <QRCode value={path || '-'} />
                    <Paragraph copyable>{path}</Paragraph>
                </div>
            </div>

            <div className={styles.right} >
                <iframe src={path} className={styles.iframe}  ></iframe>
            </div>
        </div>
    );
}

export default Home;